<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ICO</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	
	<link rel="stylesheet" type="text/css" href="css/style-letter.css">
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.min.js"></script>
	<script type="text/javascript" src="js/modernizr.js"></script>
	<script type="text/javascript" src="js/prefixfree.min.js"></script>
</head>
<body>
<!--页眉开始-->
<header>
	<div class="topBar">
		<ul>
			<li class="city">
				<span class="current"><i class="iconfont icon-location"></i>全国</span>
				【
				<span class="change">更换</span>
				】
			</li>
			<li class="welcome">欢迎来到IOC商城</li>
			<li class="tel"><i class="iconfont icon-dianhua"></i>000-000-0000</li>
			<li class="sellerCenter">商户中心</li>
			<div class="user">
				<li class="login">登录</li>
				<li class="regist">注册</li>
			</div>
			<div class="clearfix"></div>
		</ul>
	</div>
	<div class="searchBar">
		<a class="logo"><img src="img/logo.png"></a>
		<div class="search">
			<input type="text" name="search" placeholder="寻找你喜欢的。。。">
			<div class="searchBtn"><i class="iconfont icon-search1187938easyiconnet"></i></div>
		</div>
	</div>
	<nav>
		<ul class="nav">
			<li class="on">首页</li>
			<li>
				<a href="#">生活购物</a>
			</li>
			<li>
				<a href="#">精品服装</a>
			</li>
			<li>
				<a href="http://localhost:9090/houseIndex.html">家具家装</a>
			</li>
			<li>
				<a href="#">特色推荐</a>
			</li>
			<li>
				<a href="#">交流社区</a>
			</li>
			<li>关于我们</li>
			<div class="clearfix"></div>
			<div class="moveBlock"></div>
		</ul>
	</nav>
	<script type="text/javascript">
		$("nav li").mouseenter(function(){
			var x = $(this).index()
			moveTo(x)
		})
		function moveTo(index){
			$(".moveBlock").stop()
			$(".moveBlock").animate({
				"left":index*150+"px"
			},500)
		}
	</script>
</header>
<!--页眉结束-->

<!--banner开始-->
<div class="banner">
	<ul class="slideBox">
		<li class="slide slide01">
			<div class="imgBox">
				<img src="img/banner-1.jpg">
			</div>
			
			<div class="textBox">
				<div class="mask">
					<h1>2018年1月样板间</h1>
					<h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br>elit, sed do eiusmod tempor.</h2>
					<div class="btn">
						<span class="letter" data-letter="点击查看">点击查看</span>
					</div>
				</div>
			</div>
		</li>
		<li class="slide slide02">
			<div class="imgBox">
				<img src="img/banner-2.jpg">
			</div>
			<div class="textBox">
				<div class="mask">
					<h1>2018年1月样板间</h1>
					<h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br>elit, sed do eiusmod tempor.</h2>
					<div class="btn">
						<span class="letter" data-letter="点击查看">点击查看</span>
					</div>
				</div>
			</div>
		</li>
		<li class="slide slide03">
			<div class="imgBox">
				<img src="img/banner-3.jpg">
			</div>
			<div class="textBox">
				<div class="mask">
					<h1>2018年1月样板间</h1>
					<h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br>elit, sed do eiusmod tempor.</h2>
					<div class="btn">
						<span class="letter" data-letter="点击查看">点击查看</span>
					</div>
				</div>
			</div>
		</li>
	</ul>
</div>

<!--三维预览
<div class="mesh3dBanner">
	<i class="iconfont icon-duquanjing"></i>
	<p>三维预览<span>重磅推出</span><br>快来看一看你未来的家，先睹为快！</p>
	<div class="btn" id="showOutBox">快来看看</div>
	<div class="clearfix"></div>
</div>-->
<!--三维预览【弹出框】-->
<div class="mesh3d">
	<iframe src="https://www.artstation.com/embed/9192264" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel="" scrolling="no" id="outBox"> </iframe>
	<div class="btn" >
		<div class="close">关闭</div>
	</div>
</div>
<script type="text/javascript">
	$("#showOutBox").click(function(){
		showOutbox()
	})
	$(".close").click(function(){
		hideOutbox()
	})

	function showOutbox(){
		$("#outBox").animate({
			"width":"1200px",
			"height":"800px"
		},300)
		$(".mesh3d").animate({
			"margin-left":"-600px",
			"margin-top":"-400px"
		},300)
		$(".close").animate({
			"opacity":"1"
		},100)
		$(".mesh3d").after("<div class='allMask' style='width:100%;height:100%;background:rgba(0,0,0,.7);z-index:9'></div>")
	}
	function hideOutbox() {
		$("#outBox").animate({
			"width":"0",
			"height":"0"
		},300)
		$(".mesh3d").animate({
			"margin-left":"0",
			"margin-top":"0"

		},300)
		$(".close").animate({
			"opacity":"0"
		},100)
		$(".allMask").remove()
	}

</script>
<!--banner部分js效果-->
<script type="text/javascript">
	var imgPath;//设置变量用于存储接下来捕获到的图片地址
	var countSlide=0;
	var timer1=1000;//控制轮播动画单张图片滚动时间
	var timer2=50;//控制两张图片滚动间隙
	var easing='easeInOutCubic';
	var auto;
	//控制图片滚动的运动曲线
	
	inti()
	
	function inti(){
		resetSlide()
		addImgBlock()
		countSlide=0;
		auto=setInterval(bannerSlide,5000);
		$(".slide:first .mask").css({
			"margin-left":"0%",
			"opacity":"1"
		})
	}
	$(".banner").click(function(){
		countSlide=0;
		bannerSlide()
	}).hover(function(){
		clearInterval(auto)
	},function(){
		auto=setInterval(bannerSlide,5000);
	})
	function addImgBlock(){
		for(var i=0;i<3;i++){
			imgPath=$(".slide:eq("+i+") img").attr("src")
			//进行图片地址的捕获
			$(".slide:eq("+i+") .imgBox").empty()
			//清空原图片所在的div，准备重新用5张图片来填充
			for(var j=0;j<5;j++){
				$(".slide:eq("+i+") .imgBox").append("<div class='imgBlock'><img src='"+imgPath+"'></div>")
				$(".slide:eq("+i+") .imgBlock:last").css({
					"left":(j*20)+"%"
				})
				var bannerWidth=$(".banner").width()
				$(".slide:eq("+i+") .imgBlock:eq("+j+") img").css({
					"margin-left":"+="+(bannerWidth*0.2*(2-j))+"px"
				})
			}
		}
	}
	
	function bannerSlide() {
		$(".slide:first .mask").css({
			"opacity":"0"
		})
		if(countSlide<4){
			$(".slide:eq(1) .imgBlock:eq("+countSlide+")").animate({
				"top":"800px"
			},timer1,easing)
			$(".slide:eq(0) .imgBlock:eq("+countSlide+")").animate({
				"top":"800px"
			},timer1,easing)
			countSlide++
			setTimeout(bannerSlide,timer2)
		}else{
			$(".slide:eq(0) .imgBlock:eq("+countSlide+")").animate({
				"top":"800px"
			},timer1,easing)
			$(".slide:eq(1) .imgBlock:eq("+countSlide+")").animate({
				"top":"800px"
			},timer1,easing,function(){
				//回调函数
				$(".slide:last").after($(".slide:first"))
				resetSlide()
				$(".slide:eq(0) .imgBlock").css({
					"top":"0"
				})
				$(".slide:eq(2) .imgBlock").css({
					"top":"0"
				})
				$(".slide:eq(2) .mask").css({
					"margin-left":"-100%",
					"opacity":"0"
				})
				$(".slide:first .mask").animate({
						"margin-left":"0",
						"opacity":"1"
					},1000,easing)
			})
			countSlide=0;
		}
	}
	function resetSlide(){
		for(var i=0;i<3;i++){
			$(".slide:eq("+i+")").css({
				"top":(1600-800*i)+"px"
			})
		}
	}
</script>
<!--我们的服务-->
<div class="service">
	<h1>我们的服务</h1>
	<p>IOC是一支专业的，充满活力的团队。拥有才华横溢的设计师和经验丰富的管理人员，通过完美无瑕的执行力，为任何客户做出最满意的设计。</p>
	<ul>
		<li class="col">
			<div class="content">
				<i class="iconfont icon-zan"></i>
				<h1 class="number">12</h1>
				<h2>多年的经验</h2>
				<div class="line"></div>
				<p>我们的机构成立于2005年，提供最高品质的室内设计</p>
			</div>
		</li>

		<li class="col">
			<div class="content">
				<i class="iconfont icon-yuangongzhanghaoguanli"></i>
				<h1 class="number">12</h1>
				<h2>多年的经验</h2>
				<div class="line"></div>
				<p>我们的机构成立于2005年，提供最高品质的室内设计</p>
			</div>
		</li>

		<li class="col">
			<div class="content">
				<i class="iconfont icon-blackboard"></i>
				<h1 class="number">12</h1>
				<h2>多年的经验</h2>
				<div class="line"></div>
				<p>我们的机构成立于2005年，提供最高品质的室内设计</p>
			</div>
		</li>

		<li class="col">
			<div class="content">
				<i class="iconfont icon-xiaoliansmiley40"></i>
				<h1 class="number">12</h1>
				<h2>多年的经验</h2>
				<div class="line"></div>
				<p>我们的机构成立于2005年，提供最高品质的室内设计</p>
			</div>
		</li>
		<div class="clearfix"></div>
	</ul>
</div>

<!--项目案例
<div class="case">
	<div class="title">
		<h1>项目案例</h1>
		<h2>Project Case</h2>
		<div class="line"></div>
	</div>
	<ul>
		<li class="col">
			<img src="img/home-post-3-418x315.png">
			<h1>办公室</h1>
			<p>我的设计工作室经常处理办公室改造和重新设计。我们可以成功地将您的办公室转变为更具有吸引力的商业活动中心。</p>
			<a href="#">查看工程</a>
		</li>

		<li class="col">
			<img src="img/home-post-3-418x315.png">
			<h1>办公室</h1>
			<p>我的设计工作室经常处理办公室改造和重新设计。我们可以成功地将您的办公室转变为更具有吸引力的商业活动中心。</p>
			<a href="#">查看工程</a>
		</li>

		<li class="col nomargin">
			<img src="img/home-post-3-418x315.png">
			<h1>办公室</h1>
			<p>我的设计工作室经常处理办公室改造和重新设计。我们可以成功地将您的办公室转变为更具有吸引力的商业活动中心。</p>
			<a href="#">查看工程</a>
		</li>

		<li class="col">
			<img src="img/home-post-3-418x315.png">
			<h1>办公室</h1>
			<p>我的设计工作室经常处理办公室改造和重新设计。我们可以成功地将您的办公室转变为更具有吸引力的商业活动中心。</p>
			<a href="#">查看工程</a>
		</li>

		<li class="col">
			<img src="img/home-post-3-418x315.png">
			<h1>办公室</h1>
			<p>我的设计工作室经常处理办公室改造和重新设计。我们可以成功地将您的办公室转变为更具有吸引力的商业活动中心。</p>
			<a href="#">查看工程</a>
		</li>

		<li class="col nomargin">
			<img src="img/home-post-3-418x315.png">
			<h1>办公室</h1>
			<p>我的设计工作室经常处理办公室改造和重新设计。我们可以成功地将您的办公室转变为更具有吸引力的商业活动中心。</p>
			<a href="#">查看工程</a>
		</li>
		<div class="clearfix"></div>
	</ul>
</div>
-->
<!--合作伙伴-->
<div class="partner">
	<div class="title">
		<h1>合作伙伴</h1>
		<h2>Cooperative partner</h2>
		<div class="line"></div>
	</div>
	<ul>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>

		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<li>
			<img src="img/client-5.png">
			<h1>唯艺家居</h1>
		</li>
		<div class="clearfix"></div>
	</ul>
</div>

<!--页脚-->
<footer>
	<div class="background">
	</div>
		<ul class="mid">
			<li class="aboutus">
				<h1>关于我们</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit </p>
			</li>
			<li class="worktime">
				<h1>工作时间</h1>
				<dl>
					<dt>营业时间：</dt>
					<dd>周一至周五：9:00AM至08:00PM</dd>
					<dd>周六：9:00AM至05:00PM</dd>
					<br>
					<dt>休息时间：</dt>
					<dd>周日休息</dd>
					<dd>所有法定节假日休息</dd>
				</dl>
			</li>
			<li class="servicelist">
				<h1>服务列表</h1>
				<ul>
					<li>
						<i class="iconfont icon-arrowright"></i>室内设计
					</li>
					<li>
						<i class="iconfont icon-arrowright"></i>室内设计
					</li>
					<li>
						<i class="iconfont icon-arrowright"></i>室内设计
					</li>
					<li>
						<i class="iconfont icon-arrowright"></i>室内设计
					</li>
					<li>
						<i class="iconfont icon-arrowright"></i>室内设计
					</li>
				</ul>
			</li>
			<li class="contactus nomargin">
				<h1>联系我们</h1>
				<p>
					地址：4578 MARMORA ROAD,GLASGOW,D04 89GR
					<br>
					电话：(800) 123-0045 (800)123-0045
					<br>
					邮箱：397917505@qq.com
				</p>
				<ul class="icon">
					<li>
						<i class="iconfont icon-weixin"></i>
						<i class="iconfont icon-qq0"></i>
						<i class="iconfont icon-wangyi0"></i>
						<i class="iconfont icon-weibo"></i>
						<i class="iconfont icon-taobao"></i>
					</li>
				</ul>
			</li>
			<div class="clearfix"></div>
		</ul>
		<p>GELLN DESIGN 2018. ALL RIGHTS RESERVED. TERMS OF USE AND PRIVACY POLICY.</p>
</footer>

</body>
</html>